import React, { FC, useState } from 'react';

import { Table } from 'antd';

interface Props {
  data?: any[];
}

const CommandsTable: React.FC<Props> = ({ data }) => {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const Add = [
    {
      title: 'IP',
      dataIndex: 'ip',
      key: 'ip',
    },
    {
      title: '执行结果',
      dataIndex: 'why',
      key: 'why',
    },
  ];
  return (
    <Table
      columns={Add}
      rowKey={(state, index) => `${index}`}
      // className={Styles.table}
      // loading={loading}
      dataSource={data?.slice(
        (current - 1) * pageSize,
        (current - 1) * pageSize + pageSize,
      )}
      pagination={{
        current: current,
        position: ['bottomLeft'],
        pageSize: pageSize,
        total: data?.length,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条数据`,
        hideOnSinglePage: false,
        onChange: (page, size) => {
          setCurrent(page);
        },
        onShowSizeChange: (page, size) => {
          setCurrent(page);
          setPageSize(size);
        },
      }}
    />
  );
};

export default CommandsTable;
